<template>
  <div class="p-2">
    <div class="search" v-show="showSearch">
      <a-form ref="queryFormRef" :model="queryParams" layout="inline">
        <a-form-item label="流程名称" name="processName">
          <a-input v-model:value="queryParams.processName" placeholder="请输入流程名称" allow-clear style="width: 200px" @pressEnter="handleQuery" />
        </a-form-item>
        <a-form-item label="发起人" name="originatorName">
          <a-input v-model:value="queryParams.originatorName" placeholder="请输入发起人" allow-clear style="width: 200px" @pressEnter="handleQuery" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleQuery">
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button @click="resetQuery">
              <template #icon><ReloadOutlined /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <a-card :bordered="false">
      <template #title>
        <a-row>
          <a-col :span="16">
            <a-space>
              <a-button @click="handleExport" v-hasPermi="['workflow:process:copyExport']">
                <template #icon><DownloadOutlined /></template>
                导出
              </a-button>
            </a-space>
          </a-col>
          <a-col :span="8" style="text-align: right">
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
          </a-col>
        </a-row>
      </template>

      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="copyList"
        :pagination="{
          total,
          current: queryParams.pageNum,
          pageSize: queryParams.pageSize,
          onChange: handleTableChange,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 条`,
        }"
        :scroll="{ x: 1200 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'createTime'">
            {{ record.createTime }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-tooltip title="详情">
                <a-button type="link" @click="handleDetails(record)" v-hasPermi="['workflow:process:query']">
                  <template #icon><EyeOutlined /></template>
                </a-button>
              </a-tooltip>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup name="Copy">
  import { ref, onMounted, getCurrentInstance } from 'vue';
  import { useRouter } from 'vue-router';
  import { processApi } from '/@/api/workflow/work';
  import { message } from 'ant-design-vue';
  import { SearchOutlined, ReloadOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons-vue';

  const router = useRouter();
  const { proxy } = getCurrentInstance();

  const copyList = ref([]);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);

  const columns = [
    {
      title: '抄送编号',
      dataIndex: 'copyId',
      key: 'copyId',
      align: 'center',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '流程名称',
      dataIndex: 'processName',
      key: 'processName',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '发起人',
      dataIndex: 'originatorName',
      key: 'originatorName',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 180,
      fixed: 'right',
    },
  ];

  const queryFormRef = ref();

  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    processName: '',
    originatorName: '',
  });

  /** 查询待办列表 */
  const getList = async () => {
    loading.value = true;
    try {
      const { data } = await processApi.listCopyProcess(queryParams.value);
      copyList.value = data.list;
      total.value = data.total;
    } catch (error) {
      message.error('获取列表失败');
    }
    loading.value = false;
  };

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  };

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
  };

  /** 表格分页 */
  const handleTableChange = (page, pageSize) => {
    queryParams.value.pageNum = page;
    queryParams.value.pageSize = pageSize;
    getList();
  };

  /** 流程详情 */
  const handleDetails = (row) => {
    router.push({
      path: '/workflow/detail/' + row.procInsId,
      query: {
        processed: false,
      },
    });
  };

  /** 导出按钮操作 */
  const handleExport = () => {
    proxy?.download(
      'workflow/process/copyExport',
      {
        ...queryParams.value,
      },
      `copy_process_${new Date().getTime()}.xlsx`
    );
  };

  onMounted(() => {
    getList();
  });
</script>

<style lang="less" scoped>
  .search {
    margin-bottom: 16px;
  }
</style>
